<template>
  <div class="news">
    <Header title="热门资讯" />
    
    <div v-for="(item,index) in data.msg" :key="index">
      <div class="top" v-if="item.picture">
        <div class="left">
          <p class="title">看到这个肺部病变，老专家都掉到坑里去了！（已公布结果）</p>
          <p class="info">
            <span>作者：向子云</span><br/>
            <span>2021年6月19日</span>
          </p>
        </div>
        <img src="../../../assets/img/s2.webp" class="right">
      </div>  
      <div class="item" v-if="!item.picture">
        <p class="title">{{ item.title }}</p>
        <p class="info">
          <span>{{item.author}}</span>
          <span class="time">{{ item.createTime }}</span>
        </p>
      </div>
    </div>
    

  </div>
</template>

<script>  

// 热门资讯
import Header from './Header'
import {reactive} from 'vue'

export default {
  name: 'Hotnews',
  components:{
    Header
  },  

  setup(){
    const data = reactive({
      msg:[
        {
          title: '老年难治性高血压哦呦呵特征？如何诊疗？',
          author: '作者：向子云',
          createTime: '2021年6月19日',
          picture: '../../assets/img/s2.webp',
        },
        {
          title: '老年难治性高血压哦呦呵特征？如何诊疗？',
          author: '作者：向子云',
          createTime: '2021年6月19日',
          picture: '',
        },
        {
          title: '老年难治性高血压哦呦呵特征？如何诊疗？',
          author: '作者：向子云',
          createTime: '2021年6月19日',
          picture: '',
        },
      ]
    })
    return {
      data
    }
  }

}
</script>

<style lang="scss" scoped>
.news{
  .item{
    width: 34.5rem;
    height: 6.1rem;
    background: #fff;
    box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
    margin: 0 auto;
    margin-top: 1.5rem;
    box-sizing: border-box;
    padding-left: 1.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .title{
      font-size: 1.4rem;
      font-weight: 500;
      color: #000;
      text-align: left;
      padding: .5rem 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: left;
    }
    .info{
      font-size: 1rem;
      font-weight: 400;
      color: #999;
      text-align: left;
      .time{  
        margin-left: 1rem;
      }
    }
  }
  .top{
    width: 34.5rem;
    height: 14rem;
    background: #fff;
    box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, 0.05);
    border-radius: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 1rem  .5rem;
    box-sizing: border-box;
    padding: 1.4rem 1.5rem;
    .left{
      width: 16rem;
      height: 11.2rem;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title{
        font-size: 1.4rem;
        font-weight: 500;
        color: #000;
        padding-top: .9rem;
        // border: 1px solid red;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
      .info{
        font-size: 1rem;
        font-weight: 400;
        color: #999;
      }
    }
    img{
      width: 15.7rem;
      height: 11.2rem;
      margin-left: 1.3rem;
    }
  }
}
  
</style>
